<template>
  <!-- 下载记录 -->
  <div id="record" class="record">
    <!--本来应该是导航，（方便全局替换）-->
    <div class="recordCont">
      <div class="recordCont_cluster">
        <div class="amendingCont_cluster_Left">
          <div class="floorTitle">
            <span>下载记录</span>
            <i class="iconfont icon-xiegang"></i>
            <span>Download The Record</span>
          </div>
          <div class="amendingCont_cluster_Left_cont">
            <ul>
              <li :class="{amendingCont:amendingCont===1}" @click="amendingCont = 1">学术论文</li>
            </ul>
          </div>
          <div class="amendingCont_cluster_Left_contB">
            <ul v-show="amendingCont == 1">
              <li v-for="(item,index) in contA_tableData" :key="index">
                <p>
                  <a href="#">{{item.Title}}</a>
                </p>
                <p>
                  <span>{{item.Issue}}</span>
                </p>
                <p>{{item.AddDate}}</p>
                <div style="clear:both;"></div>
              </li>
              <el-pagination
                @size-change="handleSizeChange"
                @change="handleCurrentChangeA"
                :currentPage="currentPageA"
                :pageSize="page.pageSize"
                :page-size="5"
                :total="totalA"
				:showPageSize='page.pageSize'
              ></el-pagination>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    
    
  </div>
</template>

<script>
// import router from "@/router/index";
//juqery
import elPagination from '@/components/page-pagination/components/page-pagination/page-pagination'
export default {
  name: "record",
  components:{
	  elPagination
  },
  data() {
    return {
      amendingCont: 1,
      contA_tableData: [],
      contB_tableData: [],
      contC_tableData: [],
      currentPageA: 1,
      currentPageB: 1,
      userNameInfo: "",
      Issue: "",
      totalA: 0,
      totalB: 0,
	  page:{
		  pageSize:10
	  }
    };
  },
  methods: {
    // 论文点击跳转详情
    toMenuacedetail(index, id) {
      this.$uniRouter.push({
        path: "/academic/academicdetail",
        query: {
          id: id
        }
      });
    },

    // 视频点击跳转详情
    toMenuacedetailB(index, id) {
      this.$uniRouter.push({
        path: "/media/mediadetail",
        query: {
          id: id
        }
      });
    },
    getInfo() {
      this.currentPage = 1;
      this.getTableDataA();
      this.getTableDataB();
    },
    getTableDataA() {
      // 加密完成
      this.$httphelper
        .post("/api/LmDownLoadApi/GetDownLoadRecordPage", {
          Sign: "string",
          Type: "paper",
          AuthorId: this.$localStorage.getItem("AuthorId"),
          Page: this.currentPageA,
          Limit: this.page.pageSize
        })
        .then(res => {
          this.contA_tableData = res.data.data;
          this.totalA = parseInt(res.data.totalcount);
          this.contA_tableData.forEach(item => {
            item.AddDate = item.AddDate.substr(0, 10);
            item.Issue = item.Year + "," + item.Volume + "(" + item.Issue + ")";
          });
        })
        .catch(err => {
          console.log("请求失败：" + "err");
        });
    },
    getTableDataB() {
      // 加密完成
      this.$httphelper
        .post("/api/LmDownLoadApi/GetDownLoadRecordPage", {
          Sign: "string",
          Type: "video",
          AuthorId: this.$localStorage.getItem("AuthorId"),
          Page: this.currentPageB,
          Limit: this.page.pageSize
        })
        .then(res => {
          this.contB_tableData = res.data.data;
          this.totalB = parseInt(res.data.totalcount);
          this.contA_tableData.forEach(item => {
            item.AddDate = item.AddDate.substr(0, 10);
            item.Issue = item.Year + "," + item.Volume + "(" + item.Issue + ")";
          });
        })
        .catch(err => {
          console.log("请求失败：" + "err");
        });
    },
    handleCurrentChangeA(val) {
      this.currentPageA = val;
      this.getTableDataA();
    },
    handleCurrentChangeB(val) {
      this.currentPageB = val;
      this.getTableDataB();
    }
  },
  created() {
    this.getInfo();
  }
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 1010px) {
  #record {
    display: none;
  }
}
@media screen and (max-width: 1010px) {
  #record {
    /deep/.el-pagination {
      text-align: center;
      margin-top: 20rpx;
    }
    /deep/.el-pagination__total {
      display: none;
    }
    /deep/.el-pagination__sizes {
      display: none;
    }
    width: 100%;
    .recordCont {
      width: 100%;
      height: 100%;
      .recordCont_cluster {
        width: 94%;
        margin: 0 auto;
        padding-top: 10rpx;
        .amendingCont_cluster_Left {
          width: 100%;
          .floorTitle {
            height: 100%;
            border-bottom: 2px solid #eee;
            position: relative;
            span:nth-child(1) {
              display: inline-block;
              font-size: 36rpx;
              color: #000;
              width: 170rpx;
              height: 70rpx;
              border-bottom: 2px solid #003c80;
              font-family: "Adobe Heiti Std R";
              font-weight: normal;
              line-height: 60rpx;
            }
            span:nth-child(3) {
              color: #797979;
              font-size: 28rpx;
              font-family: "Adobe Heiti Std R";
            }
          }
          .amendingCont_cluster_Left_cont {
            width: 100%;
            margin-top: 30rpx;
            // overflow: hidden;
            // overflow-x: auto;
            ul {
              width: 100% !important;
              height: 64rpx;
              position: relative;
              .amendingCont {
                background: #003c80 !important;
                color: #fff;
              }
              li {
                width: 26% !important;
                list-style: none;
                float: left;
                height: 64rpx;
                line-height: 64rpx;
                text-align: center;
                margin-right:46rpx;
                color: #000000;
                font-size: 32rpx;
              }
              i {
                display: none;
              }
            }
          }
          .amendingCont_cluster_Left_contB {
            width: 100%;
            height: 100%;
            margin-top: 10rpx;
            margin-bottom: 180rpx;
            ul {
              width: 100%;
              height: 100%;
              li {
                list-style: none;
                width: 100%;
                height: auto;
                // float: left;
                margin-right: 88rpx;
                cursor: pointer;
                padding: 26rpx 26rpx;
                background: #fff;
                border-bottom: 1px solid #e6e6e6;
                p {
                  margin-bottom: 14rpx;
                  font-size: 32rpx;
                }
                p:nth-child(1) {
                  width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 1;
                  line-clamp: 1;
                  white-space: nowrap;
                  /deep/a {
                    font-size: 32rpx;
                    color: #003c80;
                  }
                }
                p:nth-child(2) {
                  width: 40%;
                  float: left;
                  margin-top: 18rpx;
                  margin-bottom: 0px !important;
                }
                p:nth-child(3) {
                  width: 30%;
                  float: right;
                  margin-top: 18rpx;
                  margin-bottom: 0px !important;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
